<template>
    <div class="contents">
        <div class="contents_left">
            <div class="statistical-report">
                <dv-border-box-13 :color="['#337ecc', '#337ecc']" >
                    <div class="item_title">
                        <div class="left_side"></div>
                        <p>设备总览</p>
                        <div class="right_side"></div>
                    </div>
                    <div class="item_report_form">
                        <LeftTop/>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="statistical-report">
                <dv-border-box-13 :color="['#337ecc', '#337ecc']" >
                    <div class="item_title">
                        <div class="left_side"></div>
                        <p>能耗监测系统统计</p>
                        <div class="right_side">
                        </div>
                    </div>
                    <div class="item_report_form">
                        <DynamicLoopDiagram/>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="statistical-report">
                <dv-border-box-13 :color="['#337ecc', '#337ecc']" >
                    <div class="item_title">
                        <div class="left_side"></div>
                        <p>数据监测统计</p>
                        <div class="right_side"></div>
                    </div>
                    <div class="item_report_form">
                        <DataMonitoring/>
                    </div>
                </dv-border-box-13>
            </div>
        </div>

        <div class="contents_center">
            <Glb3dModel/>
        </div>
        
        <div class="contents_right">
            <div class="statistical-report">
                <dv-border-box-13 :color="['#337ecc', '#337ecc']" >
                    <div class="item_title">
                        <div class="left_side"></div>
                        <p>楼宇系统统计</p>
                        <div class="right_side"></div>
                    </div>
                    <div class="item_report_form">
                        <NightingaleChart/>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="statistical-report">
                <dv-border-box-13 :color="['#337ecc', '#337ecc']" >
                    <div class="item_title">
                        <div class="left_side"></div>
                        <p>车库流量统计</p>
                        <div class="right_side"></div>
                    </div>
                    <div class="item_report_form">
                        <GarageTraffic/>
                    </div>
                </dv-border-box-13>
            </div>
            <div class="statistical-report">
                <dv-border-box-13 :color="['#337ecc', '#337ecc']" >
                    <div class="item_title">
                        <div class="left_side"></div>
                        <p>视频安防监控系统统计</p>
                        <div class="right_side"></div>
                    </div>
                    <div class="item_report_form">
                        <MonitorEquipment/>
                    </div>
                </dv-border-box-13>
            </div>
        </div>
    </div>
</template>

<script>
    import LeftTop from './left-top.vue';//设备总览
    import Glb3dModel from './glb3d-model.vue';//加载glb文件
    import GarageTraffic from './garage-traffic.vue';//车库
    import DynamicLoopDiagram from './dynamicloopdiagram.vue';//能耗
    import NightingaleChart from './nightingale-chart.vue';//能耗
    import MonitorEquipment from './monitor-equipment.vue';//监控
    import DataMonitoring from './data-monitoring.vue';//监测
    export default {
        components: {
            LeftTop,
            GarageTraffic,
            DynamicLoopDiagram,
            NightingaleChart,
            MonitorEquipment,
            DataMonitoring,
            Glb3dModel
        },
        data() {
            return {

            };
        },
        filters: {
            numsFilter(msg) {
                return msg || 0;
            },
        },
        created() {},

        mounted() {},
        methods: {

        },
    };
</script>

<style lang="scss" scoped>
    // 内容
    .contents {
        width: 100%;
        height: 92vh;

        .contents_left{
            width: 20vw;
            height: 92vh;
            float: left; 
            z-index: 999;
            // margin-left: 0.5vw;
            margin-top: 8vh;
            position: relative;
        }
 
        // 中间
        .contents_center {
            z-index: 1;
            height: 100vh;
            width: 100%;
            position: absolute;
            /* 其他背景属性，如需要的话 */
            background-position: center center; /* 背景图片位置 */
            background-repeat: no-repeat; /* 不重复背景图片 */
            background-size: 100% 100%;
            overflow: hidden;
        }

        .contents_right {
            width: 20vw;
            height: 92vh;
            float: right; 
            z-index: 999;
            //margin-right: 0.5vw;
            margin-top: 8vh;
            position: relative;
        }

        .contents_left .statistical-report, 
        .contents_right .statistical-report{
            height: 30vh;
            width: 20vw;
            z-index: 999;
            margin-top:0.26vw;
        }

        .contents_left .statistical-report{
            background-color: transparent;
            background: linear-gradient(to right,#13465a 10%, rgba(255, 255, 255, 0.01) 100%);
            backdrop-filter: blur(2px);
        }

        .contents_right .statistical-report{
            background-color: transparent;
            background: linear-gradient(to left,#13465a 10%, rgba(255, 255, 255, 0.01) 100%);
            backdrop-filter: blur(2px);
        }

        .item_title{
            height: 5vh;
            line-height: 5vh;
            width: 100%;
            font-size: 0.8vw;
            color: #31abe3;
            text-align: center;
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
        .left_side{
            width: 3vw;
            height: 0.68vw;
            // background-image: url();
        }
        .item_title p{
            line-height: 5.4vh;
            font-weight: 900;
            letter-spacing: 1px;
            background: linear-gradient(92deg, #0072ff, #00eaff 48.8525390625%, #01aaff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .right_side{
            width: 3vw;
            height: 0.68vw;
            // background-image: url();
            transform: rotate(180deg);
        }
        .item_report_form{
            width: 100%;
            height: 24.5vh;
        }
    }
</style>
